<template>
<!-- BOM采购订单 -->
  <section class="content-box">
      <!--BOM列表-->
      <div v-if="isshowList">
        <el-col :span="24" class="toolbar">
          <el-form class="title">
				  <h2>BOM采购订单</h2>
				  <el-form-item class="cover">
            <div class="list-img" @click="search">
              <img class="common-icon" src="../../../../static/content/images/Common/common-query.png" alt=""/>
              <span>查询</span>
            </div>
            <div class="list-img" @click="handleBOM">
              <img class="common-icon" src="../../../../static/content/images/Common/common-new.png" alt=""/>
              <span>新建</span>
            </div>
            <div class="list-img" @click="handleIn">
              <img class="common-icon" src="../../../../static/content/images/Common/common-in.png" alt=""/>
              <span>生成入仓单</span>
            </div>
            <div class="list-img" @click="handleInvoice">
              <img class="common-icon" src="../../../../static/content/images/Common/common-invoice.png" alt=""/>
              <span>生成发票</span>
            </div>
            <div class="list-img" @click="handlePay">
              <img class="common-icon" src="../../../../static/content/images/Common/common-pay.png" alt=""/>
              <span>生成付款单</span>
            </div>
            <div class="list-img" @click="handleMerge">
              <img class="common-icon" src="../../../../static/content/images/Common/common-merge.png" alt=""/>
              <span>合并订单</span>
            </div>
         </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table v-if="BOMList" 
        :data="BOMList" 
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionList"
        highlight-current-row  
        v-loading="loading"
        border
        element-loading-text="正在加载中"
        style="width: 100%">
          <el-table-column label="序号" type="index" width="80" sortable>
          </el-table-column>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            >
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            width="300">
            <template slot-scope="scope">
              <div class="list-img"  @click.native.prevent="handleEditBOM(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-edit.png" alt=""/>
              </div>
              <div class="list-img" @click.native.prevent="repeal(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-repeal.png" alt=""/>
              </div>
              <div class="list-img" @click.native.prevent="checkflowRow(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-flow.png" alt=""/>
              </div>
              <div class="list-img" @click.native.prevent="handleDel(scope.$index, scope.row)">
                <img class="common-icon" src="../../../../static/content/images/Common/common-list-dele.png" alt=""/>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--查询-->
        <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform">
            <el-form-item label="日    期 ：" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="Searchform.StartDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
              至&nbsp;<el-date-picker type="date" v-model="Searchform.EndDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="金    额 ：" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="已    付 ：" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="未    付 ：" :label-width="formLabelWidth">
              <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
              至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="编    号 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.DocNo" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="状    态 ：" :label-width="formLabelWidth">
              <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名    称 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.DocNo" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="采 购 员 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="供 应 商 ：" :label-width="formLabelWidth">
              <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
            </el-form-item>
            <el-form-item label="结算方式 ：" :label-width="formLabelWidth">
              <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
                <el-option value="" label="全部">全部</el-option>
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
            <el-button size="small" @click="Reset">重 置</el-button>
            <el-button size="small" @click="Query">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--BOM-->
      <div v-if="isshowBOM">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">BOM采购订单</span>
            <small>
              <span>状态：</span>
              <el-tag type="success">新增</el-tag>
            </small>
          </div>
          <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <el-button-group>
                <el-button size="small" @click="addSave">
                  <i class="icon iconfont icon-baocun"></i>&nbsp;保存
                </el-button>
                <el-button size="small" @click="addSubmit">
                  <i class="icon iconfont icon-tijiao"></i>&nbsp;提交
                </el-button>
              </el-button-group>
            </span>
          </div>
        </div>
        <main class="main">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号:</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div v-if="Names">
              <h3>名称:</h3>
              <el-select v-model="name1" placeholder="请选择">
                <el-option
                  v-for="item in Names"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <h3>日期：</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="150px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="供   应   商：">
                      <el-select v-model="name1" placeholder="请选择供应商" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="采   购   员：">
                      <el-select v-model="name1" placeholder="请选择供应商" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="销售订单：">
                      <el-input
                        placeholder="请选择销售订单"
                        style="width:200px;"
                        icon="search"
                        v-model="input2"
                        :on-icon-click="SaleOrderQuery">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结算方式：">
                      <el-select v-model="name1" placeholder="请选择结算方式" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支付税率：">
                      <el-select v-model="name1" placeholder="请选择支付税率" style="width:200px;">
                        <el-option
                          v-for="item in Names"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="采购金额(含税)：">
                      <el-input v-model="name1" placeholder="请输入采购金额" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="业务描述：">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>订单明细1</h3>  
          <el-button-group>
            <el-button size="small">导出</el-button>
            <el-button size="small">导入</el-button>
            <el-button size="small">导出模板</el-button>
          </el-button-group>
          <el-input
            placeholder="请输入查询关键字"
            icon="search"
            v-model="input2"
            style="width:200px;"
            size="small"
            :on-icon-click="handleIconClick">
          </el-input>
          <el-table 
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            border
            element-loading-text="正在加载中"
            show-summary>
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="A"
              label="存货编码"
              width="100">
            </el-table-column>
            <el-table-column
              prop="B"
              label="存货名称"
              min-width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="C"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="D"
              label="可采购数量"
              width="120">
            </el-table-column>
            <el-table-column
              label="本次采购数量"
              width="150">
              <template slot-scope="scope">
                <el-input class="full-box" type="text" v-model="scope.row.E" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="F"
              label="参考单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="G"
              label="含税单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="H"
              label="税率"
              width="80">
            </el-table-column>
            <el-table-column
              prop="I"
              label="不含税单价"
              width="120">
            </el-table-column>
            <el-table-column
              label="税金"
              width="80">
              <template slot-scope="scope">
              — 
              </template>
            </el-table-column>
            <el-table-column
              label="不含税金额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.J" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="价税总额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.K" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="需求日期"
              width="180">
              <template slot-scope="scope">
                <el-date-picker type="date" class="full-box" @change="logTimeChange"  @keyup.enter.native="nextinput($event)" placeholder="选择日期" v-model="scope.row.L" ></el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--采购入仓单-->
      <div v-if="isshowIn">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">采购入仓单</span>
            <small>
              <span>状态：</span>
              <el-tag type="success">新增</el-tag>
            </small>
          </div>
          <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <el-button-group>
                <el-button size="small" @click="addSave">
                  <i class="icon iconfont icon-baocun"></i>&nbsp;保存
                </el-button>
                <el-button size="small" @click="addSubmit">
                  <i class="icon iconfont icon-tijiao"></i>&nbsp;提交
                </el-button>
              </el-button-group>
            </span>
          </div>
        </div>
        <main class="main">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号:</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div v-if="Names">
              <h3>名称:</h3>
              <el-select v-model="name1" placeholder="请选择">
                <el-option
                  v-for="item in Names"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <h3>日期：</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="150px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="采 购 订 单：">
                      <el-input v-model="name1" placeholder="请输入采购订单" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="供   应   商：">
                      <el-input v-model="name1" placeholder="请输入供应商" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="采   购   员：">
                      <el-input v-model="name1" placeholder="请输入采购员" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label=" 结 算 方 式：">
                      <el-input v-model="name1" placeholder="请输入结算方式" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label=" 支 付 税 率：">
                      <el-input v-model="name1" placeholder="请输入支付税率" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label=" 仓 库 名 称：">
                      <el-input v-model="name1" placeholder="请输入仓库名称" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="备 注：">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>入仓明细</h3>  
          <el-table 
            :data="tableData"
            v-loading="loading"
            border
            element-loading-text="正在加载中"
            height="300"
            show-summary>
            <el-table-column 
              label="操作"
              width="80">
              <template slot-scope="scope">
                <img style="float:left" class="common-icon" src="../../../../static/content/images/Common/common-add.png" alt=""/>
                <img style="float:left" class="common-icon" src="../../../../static/content/images/Common/common-dele.png" alt=""/>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="A"
              label="存货编码"
              width="100">
            </el-table-column>
            <el-table-column
              prop="B"
              label="存货名称"
              width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="C"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="D"
              label="可采购数量"
              width="120">
            </el-table-column>
            <el-table-column
              label="本次采购数量"
              width="150">
              <template slot-scope="scope">
                <el-input class="full-box" type="text" v-model="scope.row.E" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="F"
              label="参考单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="G"
              label="含税单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="H"
              label="税率"
              width="80">
            </el-table-column>
            <el-table-column
              prop="I"
              label="不含税单价"
              width="120">
            </el-table-column>
            <el-table-column
              label="税金"
              width="80">
              <template slot-scope="scope">
              — 
              </template>
            </el-table-column>
            <el-table-column
              label="不含税金额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.J" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="价税总额"
              width="100">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.K" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="需求日期"
              width="180">
              <template slot-scope="scope">
                <el-date-picker type="date" class="full-box" @change="logTimeChange"  @keyup.enter.native="nextinput($event)" placeholder="选择日期" v-model="scope.row.L" ></el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--采购生成发票-->
      <div v-if="isshowInvoice">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">采购发票</span>
            <small>
              <span>状态：</span>
              <el-tag type="success">生成</el-tag>
            </small>
          </div>
           <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <el-button-group>
                <el-button size="small" @click="addSave">
                  <i class="icon iconfont icon-baocun"></i>&nbsp;保存
                </el-button>
                <el-button size="small" @click="addSubmit">
                  <i class="icon iconfont icon-tijiao"></i>&nbsp;提交
                </el-button>
              </el-button-group>
            </span>
          </div>
        </div>
        <main class="main">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号:</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div v-if="Names">
              <h3>名称:</h3>
              <el-select v-model="name1" placeholder="请选择">
                <el-option
                  v-for="item in Names"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <h3>日期：</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="150px">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="供    应    商：">
                      <el-input v-model="name1" placeholder="请输入供应商" style="width:200px;" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="税务发票号：">
                      <el-input v-model="name1" placeholder="请输入税务发票号" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发票金额(含税)：">
                      <el-input v-model="name1" placeholder="请输入发票金额(含税)" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="备 注：">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>开票明细</h3>  
          <el-table 
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            border
            element-loading-text="正在加载中"
            show-summary>
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="A"
              label="存货编码"
              width="100">
            </el-table-column>
            <el-table-column
              prop="B"
              label="存货名称"
              min-width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="C"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="D"
              label="可采购数量"
              width="120">
            </el-table-column>
            <el-table-column
              label="本次采购数量"
              width="150">
              <template slot-scope="scope">
                <el-input class="full-box" type="text" v-model="scope.row.E" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="F"
              label="参考单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="G"
              label="含税单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="H"
              label="税率"
              width="80">
            </el-table-column>
            <el-table-column
              prop="I"
              label="不含税单价"
              width="120">
            </el-table-column>
            <el-table-column
              label="税金"
              width="80">
              <template slot-scope="scope">
              — 
              </template>
            </el-table-column>
            <el-table-column
              label="不含税金额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.J" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="价税总额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.K" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="需求日期"
              width="180">
              <template slot-scope="scope">
                <el-date-picker type="date" class="full-box" @change="logTimeChange"  @keyup.enter.native="nextinput($event)" placeholder="选择日期" v-model="scope.row.L" ></el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 付款单 -->
      <div v-if="isshowPay">
        <!-- 导航条 -->
		    <div class="flex-top">
          <div>
            <i class="el-icon-arrow-left back" @click="ToBack"></i>
            <span style="font-size:20px;vertical-align:middle;margin:0 10px;">付款单</span>
            <small>
              <span>状态：</span>
              <el-tag type="success">生成</el-tag>
            </small>
          </div>
           <!-- 右侧 -->
          <div class="flex">
            <span class="wrapper cover">
              <el-button-group>
                <el-button size="small" @click="addSave">
                  <i class="icon iconfont icon-baocun"></i>&nbsp;保存
                </el-button>
                <el-button size="small" @click="addSubmit">
                  <i class="icon iconfont icon-tijiao"></i>&nbsp;提交
                </el-button>
              </el-button-group>
            </span>
          </div>
        </div>
        <main class="main">
          <div class="main-left">
            <div v-if="DocNo">
              <h3>单号:</h3>
              <strong>{{DocNo}}</strong>
            </div>
            <div v-if="Names">
              <h3>名称:</h3>
              <el-select v-model="name1" placeholder="请选择">
                <el-option
                  v-for="item in Names"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <h3>日期：</h3>
              <div class="flex">
                <el-date-picker type="date" v-model="DocDate" placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="left-form">
              <el-form label-width="150px">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="供    应    商：">
                      <el-input v-model="name1" placeholder="请输入供应商" style="width:200px;" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="采    购    员：">
                      <el-input v-model="name1" placeholder="请输入采购员" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="付款金额(含税)：">
                      <el-input v-model="name1" placeholder="请输入付款金额(含税)" style="width:200px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="right-form">
              <el-form label-width="100px">
                <el-form-item label="备 注：">
                  <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="name1">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </main>
        <div class="border-solid"></div>
        <div class="budget cover">
          <h3>付款明细</h3>  
          <el-table 
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            border
            element-loading-text="正在加载中"
            show-summary>
            <el-table-column
              type="index"
              width="80"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="A"
              label="存货编码"
              width="100">
            </el-table-column>
            <el-table-column
              prop="B"
              label="存货名称"
              min-width="100"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="C"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="D"
              label="可采购数量"
              width="120">
            </el-table-column>
            <el-table-column
              label="本次采购数量"
              width="150">
              <template slot-scope="scope">
                <el-input class="full-box" type="text" v-model="scope.row.E" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="F"
              label="参考单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="G"
              label="含税单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="H"
              label="税率"
              width="80">
            </el-table-column>
            <el-table-column
              prop="I"
              label="不含税单价"
              width="120">
            </el-table-column>
            <el-table-column
              label="税金"
              width="80">
              <template slot-scope="scope">
              — 
              </template>
            </el-table-column>
            <el-table-column
              label="不含税金额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.J" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="价税总额"
              width="120">
              <template slot-scope="scope">
                <el-input type="text" class="full-box" v-model="scope.row.K" @keyup.enter.native="nextinput($event)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="需求日期"
              width="180">
              <template slot-scope="scope">
                <el-date-picker type="date" class="full-box" @change="logTimeChange"  @keyup.enter.native="nextinput($event)" placeholder="选择日期" v-model="scope.row.L" ></el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 销售订单弹窗 -->
      <el-dialog title="销售订单" :visible.sync="SaleOrderDialog" :modal-append-to-body="false">
        <el-input
          placeholder="请输入销售订单号"
          style="width:200px;margin-bottom:10px;"
          icon="search"
          v-model="name1"
          :on-icon-click="handleIconClick">
        </el-input>
        <el-table 
          border
          tooltip-effect="dark"
          :data="SaleOrderList"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionSale">
          <el-table-column type="selection" width="55" :selectable="unChecked"></el-table-column>
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column property="name" label="订单编号" width="200"></el-table-column>
          <el-table-column property="address1" label="订单类型"></el-table-column>
          <el-table-column property="address2" label="客户"></el-table-column>
          <el-table-column property="address3" label="产品"></el-table-column>
          <el-table-column property="address4" label="说明"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Determine">确 定</el-button>
          <el-button size="small" @click="SaleOrderDialog = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--流程图-->
      <el-dialog title="流程执行情况" :visible.sync="checkflowRowVisible" :modal-append-to-body="false" align="center">
        <el-table :data="docRowView" min-height="300" header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
          <el-table-column property="PlanUser" label="操作人"></el-table-column>
          <el-table-column property="StepName" label="步骤名称"></el-table-column>
          <el-table-column property="OpDate" label="时间"></el-table-column>
          <el-table-column property="OpRemark" label="备注"></el-table-column>
        </el-table>
      </el-dialog>
  </section>
</template>
<script>
  export default {
    name: "BOMPurchaseOrder",
    data() {
      return {
        gray: false,
        loading: true, //显示列表loading
        dialogSearchVisible:false,//查询窗口
        docViewloading:false,//流程图
        formLabelWidth:'120px',
        SaleOrderDialog:false,
        isshowList:true,//列表
        isshowBOM:false,//BOM
        isshowIn:false,//入仓单
        isshowInvoice:false,//发票
        isshowPay:false,//付款单
        multipleSelection: [],
        multipleSelectSale: [],
        checkflowRowVisible:false,
        docRowView:[{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
        },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
        },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
        },{
          PlanUser:"杨晓莉",
          StepName:"提交",
          OpDate:"2018/1/25 16:25:55",
          OpRemark:""
        }],
        tableData:[{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        },{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        },{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        },{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        },{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        },{
          A:'YF0015',
          B:'直流电机',
          C:0,
          D:4,
          E:4,
          F:34.25,
          G:34.25,
          H:"0.00%",
          I:34.25,
          J:137.00,
          K:137.00,
          L:"2018-03-01"
        }],
        SaleOrderList:[{
          name:"CX180100001",
          // 表示选中状态
          checked: false,
          address1:"二马胖子",
          address2:"二马胖子2",
          address3:"二马胖子3",
          address4:"二马胖子4",
        },{
          name:"AV180100001",
          // 表示选中状态
          checked: false,
          address1:"二马胖子",
          address2:"二马胖子2",
          address3:"二马胖子3",
          address4:"二马胖子4",
        },{
          name:"Cc125100001",
          // 表示选中状态
          checked: false,
          address1:"二马胖子",
          address2:"二马胖子2",
          address3:"二马胖子3",
          address4:"二马胖子4",
        },{
          name:"TY180144444",
          // 表示选中状态
          checked: false,
          address1:"二马胖子",
          address2:"二马胖子2",
          address3:"二马胖子3",
          address4:"二马胖子4",
        }],
        DocNo:'1',
        DocDate:'',
        name1:'',
        input2:'',
        Names:[{
          label:'1',
          value:"1"
        },{
          label:'1',
          value:"2"
        }],
        Searchform:{
          StartMoney:'',
          EndMoney:'',
          StartDate:'',
          EndDate:'',
          DocNo:'',
          Title:'',
          DocStatus:''
        },
        options:[{
          value: '1',
          label: '黄金糕'
        },{
          value: '2',
          label: '双皮奶'
        }],
        options2:[{
          value: '1',
          label: '黄金糕'
        },{
          value: '2',
          label: '双皮奶'
        }],
        BOMList:[{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        loading:false,
        inputIndex:0
      }
    },
    methods:{
      nextinput(event){
        let ips = document.getElementsByTagName("input");
        
        console.log(event.currentTarget);
        
        console.log(ips,'ips');
        console.log(event.currentTarget.children[0].value,'event.currentTarget.children[0].value');
        if(event.currentTarget.children[1] && event.currentTarget.children[1].tagName=='INPUT'){
          let epps = document.getElementsByClassName('el-picker-panel');
          let tempepps = Object.keys(epps);
          tempepps.forEach((item,index)=>{
            epps[index].style.display = 'none';
          })
          ips[this.inputIndex+1].focus();
          ips[this.inputIndex+1].style.border = "1px solid blue";
          ips[this.inputIndex].style.border = "0px solid blue";
          return;
        }
        
        let inputs = Object.keys(ips);
        inputs.forEach((item,index)=>{
          if(index==(inputs.length-1)){
            }else if(event.currentTarget.children[0] == ips[index]){
              this.inputIndex = index+1;
              ips[index+1].focus();
              ips[index+1].style.border = "1px solid blue";
              ips[index].style.border = "0px solid blue";
            }
        })
      },
      
      logTimeChange(val){
         //let ips = document.getElementsByTagName("input");
         //ips[this.inputIndex+1].focus();
      },
      search(){
        this.dialogSearchVisible = true;
      },
      async Query(){
        this.dialogSearchVisible = false;
      },
      //重置
      Reset(){
        this.Searchform = {
          StartMoney:'',
          EndMoney:'',
          StartDate:'',
          EndDate:'',
          DocNo:'',
          Title:'',
          DocStatus:''
        }
      },
      //多选
      handleSelectionList(val) {
        let arr = [];
        this.multipleSelection = val;
        this.multipleSelection.forEach((item,index)=>{
          console.log(item.date,'item');
          arr.push(item.date)
        })
        const arrjoin = arr.join();
        console.log(arrjoin);
      },
      //销售订单列表
      handleSelectionSale(val){
        // 给个状态
        var flag = false;
        // 遍历
        this.SaleOrderList.forEach(tItem => {
          // 只要有一个为 true就改变状态
          if (tItem.checked) {
            flag = true;
            tItem.checked = false;
          }
        });

        // 如果当前表格数据没有一个被选中的情况下那么就选中当前的
        if (!flag) {
          if (val.checked) {
            val.checked = false;
            // 取消选中的时候，还原
            this.gray = false;
          } else {
            val.checked = true;
            // 选中的时候，其他变灰
            this.gray = true;
          }
          this.$nextTick(() => {
            this.tableRowClassName(val, 0)
            this.unChecked(val)
          });
        }
        this.multipleSelectSale = val;
      },
      // 表格 tr 添加class
      tableRowClassName(row, index) {
        if (!row.checked && this.gray) {
          return 'gray';
        }
      },
      unChecked(row) {
        if (!row.checked && this.gray) {
          return 0;
        } else {
          return 1;
        }
      },
      //销售订单确定按钮
      Determine(){
        let arr = '';
        this.multipleSelectSale.map(item=>{
          arr = item.name;
        })
        console.log(arr,'arr');
      },
      //BOM采购页面
      handleBOM(){
        this.isshowBOM = true;
        this.isshowList = false;
        this.isshowInvoice  = false;
        this.isshowPay = false;
        this.isshowIn = false;
      },
      //入仓单
      handleIn(){
        this.isshowIn = true;
        this.isshowPay = false;
        this.isshowList = false;
        this.isshowBOM = false;
        this.isshowInvoice  = false;
      },
      //付款单
      handlePay(){
        this.isshowPay = true;
        this.isshowInvoice  = false;
        this.isshowBOM = false;
        this.isshowList = false;
        this.isshowIn  = false;
      },
      //发票
      handleInvoice(){
        this.isshowInvoice  = true;
        this.isshowPay = false;
        this.isshowBOM = false;
        this.isshowList = false;
        this.isshowIn  = false;
      },
      // 新建返回到列表页面
      ToBack() {
        this.isshowList = true;
        this.isshowBOM = false;
        this.isshowIn = false;
        this.isshowInvoice = false;
        this.isshowPay = false;
      },
      //销售订单按钮
      SaleOrderQuery(ev) {
        this.SaleOrderDialog = true;
        console.log(ev,'ev');
      },
      handleIconClick(){
      },
      //保存
      addSave(){},
      //提交
      addSubmit(){},
      //合并订单
      handleMerge(index,row){
        this.$confirm("确定要合并所选订单吗?", "提示", {
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "合并成功",
          });
        })
      },
      handleDel(index,row){
        this.$confirm("确认删除该记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
      },
      //流程图
      checkflowRow(){
        this.checkflowRowVisible = true;
      },
      // 撤销
      repeal(index, row) {
        this.$confirm("确认撤销吗?", "提示", {
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "撤销成功"
          });
        });
      },
      created(){

      },
      mounted(){

      }
    }
  }
</script>
<style scoped lang="scss">
@import "../../../common/css/index.css";
.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}
.toolbar .title {
  display: inline-flex;
  line-height: 5px;
  width: 100%;
  justify-content: space-between;
}
.main-left{
  padding:1vw 1vw;
}
.main-left h3{
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
.left-form,.right-form{
  display: flex;
  justify-content: center;
  align-items: center;
}
.gray{
  background: #eee !important;
}
</style>

